<template>

  <a-layout :style="{ marginLeft: '0px' }">
    <!-- <a-layout-header :style="{ background: '#fff', padding: 0 }" /> -->
    <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
      <div :style="{ padding: '0px', background: '#fff', textAlign: 'center' }">
        <br>
        <div id="mailButton"></div>
        <br>
        <a-card hoverable style="width: 450px;margin: 0 auto;">
          <template #cover>
            <img style="width: 450px" v-if="data.imageSrc" :src="data.imageSrc" />
          </template>
          <a-card-meta :title="data.question_info.question_content">
            <template #description><div>{{ data.question_info.mode }}</div></template>
          </a-card-meta>
        </a-card>
        <br>

        <div v-if="data.question_info.mode === '选择题'">
          <a-radio-group v-model="value" @change="onChange">
            <div v-for="item in data.question_info.options">
              <text>{{ item.option_type }}</text>
              <text style="margin-left:3px;margin-right:3px">.</text>
              <b>{{ item.option_content }}</b>
            </div>
          </a-radio-group>
        </div>

   
          <!-- <a-list bordered :data-source="data.referenceList">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <b>{{
              item
            }}</b></a-list-item> -->
          
          <!-- </a-list> -->
          <a-divider></a-divider>
        <div v-for="item in data.referenceList" style="margin-top:10px">
          <div style="width: 100px; display: inline-block; margin-right: 0px">
            <user-outlined class="icon_demander" />
            <text style="margin-left: 6px">{{ item.user_id }}</text>
          </div>
          <div style="width: 60px; display: inline-block">
            <message-outlined class="icon_demander" />
            <b style="margin-left: 6px">{{ item.ans }}</b>
          </div>
          <div style="width: 150px; display: inline-block">
            <a-popconfirm
              title="确定要设置该标注者的答案为本题答案吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="confirm(item)"
              @cancel="cancel"
            >
              <a-button>设此为答案</a-button>
            </a-popconfirm>
          </div>
          <!--<a-button type="primary" @click="showModal(item)">设为答案</a-button>-->
        </div>
                  <a-divider></a-divider>
        <div style="margin-top: 0px">
          <div slot="header" style="margin-top:-8px;margin-bottom:15px">
            <a-popconfirm
              title="确认驳回此题吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="confirmReject"
              @cancel="cancel"
            >
              <a-button type="danger" ghost>本题有错误/歧义，驳回</a-button>
            </a-popconfirm>
          </div>  
          <a-collapse v-model="activeKey" ghost :bordered="false">
            <a-collapse-panel key="1">
              <template #expandIcon="{ isActive }">
                <caret-right-outlined :rotate="isActive ? 90 : 0" />
              </template>
              <template #header>
                <b>这些都不对，自己作答</b>
              </template>
              <div v-if="data.question_info.mode === '选择题'">
                <a-radio-group v-model="value" @change="onChange">
                  <div v-for="item in data.question_info.options">
                    <a-radio :style="radioStyle" :value="item">
                      {{ item.option_type }} .
                      {{ item.option_content }}
                    </a-radio>
                  </div>
                </a-radio-group>
              </div>
              <div v-if="data.question_info.mode === '填空题'">
                <div>
                  <a-input
                    :style="{ width: '400px' }"
                    placeholder="请输入答案"
                    v-model:value="data.input_value"
                  />
                </div>
              </div>
              <br />
              <a-button type="primary" id="confirm" @click="getNext"
                >提交答案</a-button
              >
            </a-collapse-panel>
          </a-collapse>
        </div>
        <a-popconfirm
          title="Are you sure delete this task?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="confirm(item)"
          @cancel="cancel"
        >
          <!--  <a @click="showModal">设这个为答案</a>  -->
        </a-popconfirm>
        <br />
      </div>
    </a-layout-content>
    <!--<a-button @click="getReferenceList">getReferenceList</a-button>-->
    <a-layout-footer :style="{ textAlign: 'center' }"
      >众包数据平台 ©2021</a-layout-footer
    >
  </a-layout>
</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  get,
  del,
  post,
  getBlob,
  tip,
  removeLocalToken,
  setLocalToken,
} from "@/common";
import { MessageOutlined, UserOutlined } from "@ant-design/icons-vue";
////////////////////////////////////////////
const router = useRouter();

const data = reactive({
  answerChoose: {},
  visible: false,
  imageSrc: "",
  require_id: "",
  question_info: {},
  choose_value: {},
  input_value: "",
  wait: 0,
  referenceList: [],
});

const getReferenceList = () => {
  var question_id = { question_id: data.question_info.question_id };
  console.log("???????????????????????????????????????????????");
  console.log(question_id);
  post("/answer/answer/getReferenceList", question_id).then((res) => {
    console.log(res);
    data.referenceList = res.data;
  });
};

const f = () => {
  console.log(document.getElementById("mailButton"));
  time(document.getElementById("mailButton"), data.question_info.question_id);
};

const time = (obj, question_id) => {
  if (data.wait === 0) {
    //document.getElementById("confirm").setAttribute("disabled", true);
    obj.innerHTML = "请刷新以重新获取题目";
  } else {
    obj.setAttribute("disabled", true);
    obj.innerHTML = "请在" + data.wait + "秒内审核";
    if (question_id != data.question_info.question_id) {
      return;
    }
    data.wait--;
    setTimeout(function () {
      time(obj, question_id);
    }, 1000);
  }
};

const ans = reactive({
  //vetur
  answer: "",
  question_id: "",
});

console.log("funcA!!!");
ans.question_id = "";
ans.ans = "";

const goExamine = () => {
  router.push({ path: "/checker/examine" });
};

const getQues = () => {
  get("/answer/answer/getQues", {}, { loading: false }).then((res) => {
    if (res.data.code == 500) {
      goExamine()
    } else {
      console.log(res);
    data.question_info = res.data;
    data.wait = Math.ceil(data.question_info.limitTime / 1000); //1000;
    console.log(data.wait);
    f();
    goNext(data.question_info);
    getReferenceList();
    }
    
    
  });
};
getQues();
const getNext = () => {
  console.log("choose!");
  if (data.question_info.mode == "选择题") {
    console.log(data.choose_value);
    ans.ans = data.choose_value.option_type;
    ans.question_id = data.question_info.question_id;
    console.log("upload answer!");
    console.log(ans);
  } else if (data.question_info.mode == "填空题") {
    ans.ans = data.input_value;
    ans.question_id = data.question_info.question_id;
    console.log("upload answer!");
    console.log(ans);
  }
  if (ans.question_id != "") {
    confirm(ans);
  }
  data.choose_value = {};
};

const submit = () => {
  console.log(ans);
  post("/answer/answer/submit", ans).then((res) => {
    console.log(res);
    getQues();
  });
  ans.question_id = "";
  ans.ans = "";
};

const choose = (item) => {
  data.choose_value = item;
  console.log(data.choose_value);
  //console.log(item);
};

const goNext = (answerDto) => {
  getBlob(
    "/answer/answer/nextPic/" + "/" + answerDto.path,
    { request_id: answerDto.request_id },
    {
      loading: false,
    }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      data.imageSrc = reader.result;
      console.log(data.imageSrc);
    });
    reader.readAsDataURL(blob);
  });
};
const onChange = (e) => {
  data.choose_value = e.target.value;
  console.log("radio checked", e.target.value);
};


const confirm = (answer) => {
  answer.question_id = data.question_info.question_id;
  console.log(answer);
  post("/answer/answer/confirm", answer).then((res) => {
    console.log(res);
    getQues();
  });
  ans.question_id = "";
  ans.ans = "";
};

const confirmReject = () => {
  reject(ans);
  console.log("reject this ques!");
};

const reject = (answer) => {
  answer.question_id = data.question_info.question_id;
  console.log(answer);
  post("/answer/answer/reject", answer).then((res) => {
    console.log(res);
    getQues();
  });
  ans.question_id = "";
  ans.ans = "";
};
</script>

<style>
.home-nav {
  height: 48px;
  width: 100%;
  text-align: center;
  box-shadow: 0px 10px 1px rgba(0, 0, 0, 0.01);
}
.icon_demander {
  color: aquamarine;
}
</style>